از یک مشخصه بصورت id=”test” استفاده می کنیم:

ما دو تا دکمه معمولی به صفحه اضافه می کنیم. دکمه ها به هنگام کلیک شدن یک تابع به نام loadXMLDoc را فراخوانی خواهند کرد:

Click Me
Click Me

در آخر ما یک اسکریپت به قسمت صفحه حاوی تابع loadXMLDoc اضافه می کنیم:

همه مرورگرها بطور درونی از شیء جدید جاوا اسکریپت XMLHttpRequest پشتیبانی می کنند (البته IE5 و IE6 از ActiveXObject استفاده می کنند).

این شیء می تواند اطلاعات (داده) را از سرور درخواست کند.

بیاید بروی فایل HTML خودمان کار کنیم. داشتیم بروی اسکریپت جاوا اسکریپت اضافه شده در قسمت کار می کردیم:

function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.open(“GET”,url,false);
xmlhttp.send(null);
document.getElementById(‘test’).innerHTML=xmlhttp.responseText;
}

توضیح مثال

ایجاد یک شیء XMLHttpRequest

xmlhttp=new XMLHttpRequest()

ایجاد یک شیء ActiveXObject اگر مروگر اینترنتی IE5 یا IE6 باشد

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”)

باز کردن شیء درخواست

xmlhttp.open(“GET”,url,false)

ارسال درخواست به سرور

xmlhttp.send(null)

به روز رسانی صفحه با اطلاعات دریافتی از سرور

document.getElementById(‘test’).innerHTML=xmlhttp.responseText

نکته: هر زمان بخواهید یک شیء XMLHttpRequest ایجاد نمائید کد بالا را می تواند استفاده شود.

کد کامل مثال

 

خواص و متدهای مهم شیء XMLHttpRequest

متدهای مهم

شیء XMLHttpRequest دو متد مهم دارد:

• open
• send

ارسال یک درخواست آژاکس به یک سرور

برای ارسال یک درخواست به یک سرور وب، ما از متدهای open و send استفاده می کنیم.

متد open سه تا آرگومان (متغیر ورودی) می گیرد:

• اولین آرگومان مشخص کننده این است که از کدامیک از متدها (GET or POST) استفاده شود.
• دومین آرگومان مشخص کننده نام منبع سرور (URL) است.
• سومین آرگومان زمانی استفاده می شود که بخواهیم نحوه اداره درخواست بصورت غیر همزمان (آسنکرون) انجام بپذیرد.

متد send برای درخواست کردن از سرور استفاده می شود. فرض کنید فایلی به نام “time.asp” را می خواهیم درخواست کنیم، کدش بصورت زیر است:

url=”time.asp”
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);

نکته: در این مثال فرض کرده ایم هم صفحه وب و هم منبع درخواستی هر دو در یک دایرکتوری قرار گرفته اند.

خواص مهم

شیء XMLHttpRequest دارای سه خاصیت مهم است:

• خاصیت responseText
• خاصیت readyState
• خاصیت onreadystatechange

خاصیت responseText

شیء XMLHttpRequest هر داده ایی که از سرور به عنوان نتیجه درخواست صورت گرفته دریافت می شود را در خاصیت responseText خودش ذخیره می کند.

در مثالی که برای شما زده شد ما محتوای خاصیت responseText را در کد HTML مان به روش زیر کپی می کنیم:

document.getElementById(‘test’).innerHTML=xmlhttp.responseText

آرگومان سوم متد open

وقتیکه آرگومان سوم متد Open مقدار false بگیرد، به شکل دستور زیر توجه کنید:

xmlhttp.open(“GET”,url,false);
xmlhttp.send(null);
document.getElementById(‘test’).innerHTML=xmlhttp.responseText;

وقتیکه پارامتر سوم متد Open مقدار false بگیرد، به شیء XMLHttpRequest می گوید که تا زمان تکمیل درخواست سرور، و قبل از اجرای دستور بعدی منتظر بماند.

توجه: برای برنامه های کوچک و درخواست ساده از سرور، این عمل مناسب است. اما اگر وظایف درخواستی زمان بر باشند یا سرور نتواند آنرا انجام دهد، می تواند باعث بروز مشکل و هنگ کردن برنامه وب تان شود.

وقتیکه آرگومان سوم متد Open مقدار true بگیرد

وقتیکه پارامتر سوم متد Open مقدار true بگیرد، به شیء XMLHttpRequest می گوید که به اجرای دستورات حتی بعد از ارسال درخواست به سرور ادامه بدهد.

بخاطر اینکه تا شما از کامل شدن درخواست سرور اطمینان حاصل نکرده اید نمی توانید به سادگی از پاسخ درخواست سرور استفاده کنید، لازم است شما خاصیت onreadystatechange شیء XMLHttpRequest را بروی یک تابع (یا نام یک تابع) تنظیم کنید تا بعد از تکمیل درخواست، اجرا گردد.

برای این منظور کد را کمی تغییر می دهیم:

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{document.getElementById(‘test’).innerHTML=xmlhttp.responseText}
}
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);

خاصیت readyState

خاصیت readyState وضعیت پاسخ سرور را نگه می دارد.

مقادیر ممکن برای خاصیت readyState:

• مقدار ۰: درخواست هنوز مورد بررسی قرار نگرفته است. (not initialized)
• مقدار ۱: درخواست ایجاد شده است.
• مقدار ۲: درخواست فرستاده شده است.
• مقدار ۳: درخواست در پردازش است.
• مقدار ۴: درخواست کامل است.

خاصیت onreadystatechange

خاصیت onreadystatechange یک تایع (یا نام یک تابع) را در خود نگه می دارد هر زمان که خاصیت readyState تغییر کند بطور خودکار تابع را فراخوانی خواهد کرد.

شما می توانید یک تابع کامل را در این خاصیت بصورت زیر ذخیره نمائید:

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{document.getElementById(‘test’).innerHTML=xmlhttp.responseText}
}
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);

همچنین شما می توانید نام تابع را همانند کد زیر در این خاصیت قرار دهید:

xmlhttp.onreadystatechange=state_Change
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
…
…
…
function state_Change()
{
if(xmlhttp.readyState==4)
{document.getElementById(‘test’).innerHTML=xmlhttp.responseText}
}

چیزی به اسم آژاکس سرور وجود ندارد!

شیء XMLHttpRequest می تواند هر نوع داده ایی را درخواست کند.

با شیء XMLHttpRequest شما می توانید هر منبع وب بروی سرور را درخواست کنید. شما می توانید فایل متنی TXT، فایل اچ تی ام ال HTML، تصاویر یا هر داده دیگری را که قابل دسترس از طریق اینترنت است را درخواست کنید.

درخواست فایل های متنی

اکثر برنامه های آژاکس فایل های متنی ساده را جهت اخذ داده برای برنامه درخواست می کنند.

درخواست فایل های XML

یکی از متدهای رایج آژاکس، درخواست فایل های XML برای استخراج داده برنامه است.

درخواست فایل های PHP یا ASP

درخواست یک فایل PHP یا ASP یکی از روش های رایج برای دسترسی به اطلاعات پایگاه داده است.

درخواست فایل های HTML

فایل های HTML یکی از روش های رایج برای پر کردن اطلاعات مختلف بروی یک صفحه وب است.

فرم های ثبت

با آژاکس براحتی خواهید توانست داده های فرم ثبت نام را بدون بارگذاری مجدد صفحه دریافت کنید.

مثال آنلاین از آژاکس: http://www.w3schools.com/Ajax/tryit.asp?filename=tryajax_first

 

 

             

	منبع: مرجع وبمسترهای پارسی | Tehran-dl.com
	پسورد فايل: www.Tehran-dl.com (در صورت نیاز)

تاریخ: پنج شنبه 16 تير 1390برچسب:ajax, آموزش ajax, آموزش آجکس, طراحی وب, طرح ajax, وب حرفه ای,

نظرات شما عزیزان: